<template>
  <div>
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="cropsId" label="作物编号"></el-table-column>
      <el-table-column prop="farmerDept" label="原料厂商"></el-table-column>
      <el-table-column prop="cropsName" label="作物名称"></el-table-column>
      <el-table-column prop="farmerNickName" label="原料厂商负责人"></el-table-column>
      <el-table-column label="加工状态" prop="maching">
        <template v-slot="scope">
          <el-tag v-show="scope.row.machingStatus === null">未加工</el-tag>
          <el-tag type="danger" v-show="scope.row.machingStatus === 1">加工中(任务已经分发)</el-tag>
          <el-tag type="warning" v-show="scope.row.machingStatus === 2">加工完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="库状态" prop="out_factory_status">
        <template v-slot="scope">
          <el-tag v-show="scope.row.outFactoryStatus === null">未出库</el-tag>
          <el-tag v-show="scope.row.outFactoryStatus === 1">已出库</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-show="scope.row.machingStatus !== 1 && scope.row.machingStatus !== 2" size="mini" type="text" @click="taskDistribution(scope.row)">任务分发</el-button>
          <el-button v-show="scope.row.machingStatus !== null" size="mini" type="text" @click="queryTaskByCropsId(scope.row)">查看任务分发信息</el-button>
          <el-button v-show="scope.row.productWriteStatus !== 1" size="mini" type="text" @click="addThing(scope.row)">填写产品基本信息</el-button>
          <el-button v-show="scope.row.productWriteStatus !== null" size="mini" type="text" @click="queryProductInfo(scope.row)">查看产品基本信息</el-button>
          <el-button size="mini" type="text" @click="staffWork(scope.row)">员工工作量</el-button>
          <el-button size="mini" type="text" @click="noticeDriver(scope.row)">通知运输</el-button>
          <el-button v-show="scope.row.outFactoryStatus === null" size="mini" type="text" @click="outFactory(scope.row)">产品出库</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog center title="联系运输" :visible.sync="noticeDriverDialog" width="500px" append-to-body>
      <el-form ref="form" :model="trasportForm" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="选择司机" prop="nickName">
              <el-select v-model="trasportForm.userName" placeholder="请选择">
                <el-option v-for="user in driverList" :key="user.userName" :label="user.nickName" :value="user.userName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="零售商" prop="nickName">
              <el-select v-model="trasportForm.deptId" placeholder="请选择">
                <el-option v-for="dept in factoryList" :key="dept.deptId" :label="dept.deptName" :value="dept.deptId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注"><el-input v-model="trasportForm.remarks" type="textarea" placeholder="请输入内容"></el-input></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addNoticeDriver">确 定</el-button>
        <el-button @click="noticeDriverDialog=false">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog center title="员工工作量证明" :visible.sync="staffWorkDialog" width="1200px" append-to-body>
      <el-row :gutter="8" >
        <el-col :span="6" v-for="(info,index) in operationList" :key="index" style="padding-top: 10px;">
          <el-card style="border-color: #42b983;">
            <el-row>
              <el-col :span="24">操作ID：{{ info.operation_id }}</el-col>
            </el-row>
            <br>
            <el-row>
              <el-col :span="24">操作人：{{ info.operation_people_name }}</el-col>
            </el-row>
            <br>
            <el-row>
              <el-col :span="24">操作人电话：{{ info.operation_people_tel }}</el-col>
            </el-row>
            <br>
            <el-row>
              <el-col :span="24">操作时间：{{ info.time }}</el-col>
            </el-row>
            <br>
            <el-row>
              <el-col :span="24">操作内容：{{ info.work_content }}</el-col>
            </el-row>
          </el-card>
        </el-col>
        <br>
      </el-row>
    </el-dialog>

    <el-dialog center title="任务分发" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="任务标题"><el-input v-model="form.taskName" placeholder="请输入任务标题"></el-input></el-form-item>
        <el-form-item label="任务分工内容"><el-input v-model="form.taskRemark" type="textarea" placeholder="请输入内容"></el-input></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addTask">确 定</el-button>
        <el-button @click="open=false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog center title="任务下发详情" :visible.sync="taskInfoDialog" width="700px" append-to-body>
      <el-row>
        <el-col :span="12">任务ID：{{ taskInfo.taskId }}</el-col>
        <el-col :span="12">任务名称：{{ taskInfo.taskName }}</el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12">作物ID：{{ taskInfo.cropsId }}</el-col>
        <el-col :span="12">发布时间：{{ taskInfo.time }}</el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12">状态：{{ taskInfo.status }}</el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="24">详情内容：{{ taskInfo.taskRemark }}</el-col>
      </el-row>
    </el-dialog>

    <el-dialog center title="产品基本信息" :visible.sync="productInfoDialog" width="700px" append-to-body>
      <el-row>
        <el-col :span="24">作物ID：{{ productInfos.crops_id }}</el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12">产品ID：{{ productInfos.product_id }}</el-col>
        <el-col :span="12">产品名称：{{ productInfos.product_name }}</el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12">净含量：{{ productInfos.Net_Content }}</el-col>
        <el-col :span="12">保存方式：{{ productInfos.keep_mathod }}</el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12">负责人：{{ productInfos.leader }}</el-col>
        <el-col :span="12">负责人电话：{{ productInfos.leader }}</el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12">配料：{{ productInfos.mixed_ingredients }}</el-col>
        <el-col :span="12">工时：{{ productInfos.work_hours }}</el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12">车间：{{ productInfos.workshop }}</el-col>
        <el-col :span="12">数据上链时间：{{ productInfos.time }}</el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12">食用推荐：{{ productInfos.cooking_recommend }}</el-col>
        <el-col :span="12">备注：{{ productInfos.remarks }}</el-col>
      </el-row>
    </el-dialog>
    <el-dialog center title="生产基本信息添加" :visible.sync="addThingDialog" width="700px" append-to-body>
      <el-form ref="form" label-width="80px" :model="recordForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="品名" prop="nickName"><el-input v-model="recordForm.ProductName" placeholder="请输入" /></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="配料" prop="nickName"><el-input v-model="recordForm.MixedIngredients" placeholder="请输入" /></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="负责人" prop="nickName"><el-input v-model="recordForm.Leader" placeholder="请输入" /></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="nickName"><el-input v-model="recordForm.LeaderTel" placeholder="请输入" /></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="生产车间" prop="nickName"><el-input v-model="recordForm.Workshop" placeholder="请输入" /></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产工时" prop="nickName"><el-input v-model="recordForm.WorkHours" placeholder="请输入" /></el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="储藏方法" prop="nickName">
              <el-input v-model="recordForm.KeepMethod" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="净含量" prop="nickName">
              <el-input v-model="recordForm.NetContent" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="食用推荐"><el-input v-model="recordForm.CookingRecommend" type="textarea" placeholder="请输入内容"></el-input></el-form-item>
        <el-form-item label="备注"><el-input v-model="recordForm.Remarks" type="textarea" placeholder="请输入内容"></el-input></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitProductInfo">确 定</el-button>
        <el-button @click="addThingDialog=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {nanoid} from "nanoid";
import {formatDate} from "@/utils";
export default {
  name: "ProductIndexView",
  data(){
    return{
      tableData:[],
      ids:{},
      noticeDriverDialog:false,
      trasportForm:{},
      driverList:[],
      factoryList:[],
      checkInfo:'',
      staffWorkDialog:false,
      open:false,
      operationList:[],
      form:{},
      taskInfoDialog:false,
      taskInfo: {},
      productInfos: {},
      productInfoDialog:false,
      recordForm:{},
      addThingDialog:false,
      cropsInfos:{}
    }
  },methods:{
    //添加基本信息
    submitProductInfo(){
      const productInfoArray = [];
      const id = new this.$snowFlakeId().generate();
      const deptName='南宁生产厂商'
      productInfoArray.push(id)
      productInfoArray.push(id)
      productInfoArray.push(this.cropsInfos.cropsId)
      productInfoArray.push(this.recordForm.ProductName)
      productInfoArray.push(this.recordForm.MixedIngredients)
      productInfoArray.push(this.recordForm.Leader)
      productInfoArray.push(this.recordForm.LeaderTel)
      productInfoArray.push(this.recordForm.Workshop)
      productInfoArray.push(deptName)
      productInfoArray.push(this.recordForm.WorkHours)
      productInfoArray.push(formatDate(new Date()))
      productInfoArray.push(this.recordForm.KeepMethod)
      productInfoArray.push(this.recordForm.NetContent)
      productInfoArray.push(this.recordForm.CookingRecommend)
      productInfoArray.push(this.recordForm.Remarks)
      this.$httpBlock
          .post(this.$httpUrl + '/productapi/createProductInfo', { productInfoArray: productInfoArray })
          .then(res => {
            if (res.status === 200) {
              this.axios.get("/product/product/updateProductWriteStatus?cropsId="+this.cropsInfos.cropsId).then(res => {
                if (res.data.data){
                  this.addThingDialog = false;
                  this.$message.success("数据上链成功");
                  this.getList();
                }
              }).catch(err => {
                this.$message.error("出现异常");
              })
            }
          })
          .catch(err => {
            this.$message.error('存储异常 ' + err);
          });
    },

    addThing(row){
      this.cropsInfos = row
      this.addThingDialog = true
    },
    queryProductInfo(row){
      this.productInfoDialog = true
      this.$httpBlock
          .get(this.$httpUrl + '/productapi/queryProductInfoByCropsId?id='+row.cropsId)
          .then(res => {
            this.productInfos = res.data[0].Record;
          })
          .catch(err => {
            this.msgError('查询异常 ' + err);
          });
    },
    queryTaskByCropsId(row){
      this.axios.get("/product/product/queryTaskByCropsId/"+row.cropsId).then(res=>{
        this.taskInfo = res.data.data
        this.taskInfoDialog = true
      })
    },
    //任务分发
    addTask(){
      this.form.taskId =new this.$snowFlakeId().generate()
      this.form.cropsId = this.productInfo.cropsId;
      this.form.leaderId = 'huangzhengshu'
      this.form.time = formatDate(new Date());
      this.form.leaderName = '黄证书'
      this.form.status = 0;
      this.axios.post("/product/product/addTask",this.form).then(res=>{
        if (res.data.data){
          const info = {
            cropsId:this.productInfo.cropsId,
            machingStatus:1
          }
          this.axios.post("/product/product/updateMachingStatus",info).then(res=>{
            if (res.data.data){
              this.$message.success("产品进入加工状态")
              this.getList()
            }
          })
          this.$message.success("发布任务成功");
          this.open = false;
        }
      }).catch(err => {
        this.$message.error("添加任务出错")
      })
    },
    taskDistribution(row){
      this.productInfo = row
      this.open = true
    },
    //员工工作量证明
    staffWork(row){
      this.staffWorkDialog=true
      this.$httpBlock
          .get(this.$httpUrl + '/productapi/queryOperationByCropsId?id='+row.cropsId)
          .then(res => {
            const array = [];
            for (let i = 0; i < res.data.length; i++) {
              array.push(res.data[i].Record);
            }
            this.operationList = array;
          })
          .catch(err => {
            this.$message.error('查询异常 ' + err);
          });
    },
    outFactory(row){
      this.$confirm('确定将ID为【'+row.cropsId+'】的产品出库吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.get("/product/product/productOutFactory/"+row.cropsId).then(res=>{
          if (res.data.data){
            this.$message.success("出库成功")
            this.getList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消出库'
        })
      })
    },
    addNoticeDriver(){
      this.trasportForm.cropsId = this.checkInfo.cropsId;
      this.trasportForm.driverId = this.trasportForm.userName;
      this.trasportForm.time = new Date();
      this.trasportForm.farmerNickName = "南宁生产厂商黄证书";
      this.trasportForm.farmerUserName = "huangzhengshu";
      this.trasportForm.farmerTel = "19889898989";
      this.trasportForm.farmerDept = "南宁生产厂商";
      this.trasportForm.factoryId = this.trasportForm.deptId
      this.trasportForm.status = 0;
      this.axios.post("/product/product/addTransport",this.trasportForm).then(res=>{
        if(res.data.data){
          this.$message.success("联系运输成功")
          this.noticeDriverDialog=false
        }else {
          this.$message.error("联系运输失败")
        }
      })
    },
    noticeDriver(row){
      this.checkInfo=row
      this.noticeDriverDialog=true
      this.axios.get("/user/user/getDriverList").then(res=>{
        this.driverList=res.data.data
      })
      this.axios.get("/dept/dept/getFactoryList/125").then(res=>{
        this.factoryList=res.data.data
      })
    },
    handleSelectionChange(selection) {
      this.ids=selection.map(item => item.id).join(",")
    },
    getList(){
      this.axios.get("/product/product/queryList/124").then(res=>{
        this.tableData=res.data.data
      })
    }
  },created() {
    this.getList()
  }
}
</script>

<style scoped>

</style>